<template>
	<view class="base" :style="{ 'background-color': showData.bgColor }">
		<view class="title">
			<view
				class="diy-title"
				:style="{
					'font-size': `${showData.titleSize}px`,
					color: `${showData.titleColor}`,
					'font-weight': `${showData.titleWeight == '1' ? '700' : ''}`,
				}"
			>
				<p>{{ showData.title }}</p>
			</view>
			<view class="more-btn" @click="toPage(showData.linkUrl)">
				<text
					v-if="showData.moreBtn && showData.moreBtnStyle != '3'"
					:style="{ color: `${showData.moreBtnStyle == '1' ? '#409EFF' : ''}` }"
					class="more-btn-text"
				>
					{{ showData.moreBtnText }}
				</text>
				<u-icon v-if="showData.moreBtnStyle != '1'" name="arrow-right"></u-icon>
			</view>
		</view>

		<view
			class="diy-desc"
			:style="{
				'font-size': `${showData.descSize}px`,
				color: `${showData.descColor}`,
				'font-weight': `${showData.descWeight == '1' ? 'bold' : ''}`,
			}"
		>
			<p>{{ showData.desc }}</p>
		</view>
		<!-- <el-divider v-if="showData.bottomLine" /> -->
	</view>
</template>

<script setup lang="ts">
import { toJumpUrl } from '@/utils/index';

defineProps({
	showData: {
		type: Object,
		default: () => {},
	},
});
const toPage = (jumpUrl: string) => {
	toJumpUrl(jumpUrl);
};
</script>

<style scoped lang="scss">
.el-divider--horizontal {
	margin: 0% !important;
}

.base {
	padding: 10px;
	padding-bottom: 0px;
}

.title {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;

	.more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.more-btn-text {
		font-size: 12px;
	}
}
</style>
